import React, { Fragment } from 'react';
import Immutable from 'immutable';
import PropTypes from 'prop-types';
import { Modal } from 'ywen-mobile-ui';
import BaseComponent from '../../components/common/baseComponent.js';


class FilterModal extends BaseComponent {
  static propTypes = {
    selectFunc: PropTypes.func.isRequired,
    brandList: PropTypes.instanceOf(Immutable.List).isRequired,
    distanceList: PropTypes.instanceOf(Immutable.List).isRequired,
    showMap: PropTypes.bool.isRequired,
    className: PropTypes.string,
  }

  state = {
    show: false,
    type: null,
  }

  show = (type) => {
    this.setState({ show: true, type });
  }

  close = () => {
    this.setState({ show: false });
  }

  doSelect = (type, item, e) => {
    e.stopPropagation();
    const { selectFunc } = this.props;
    selectFunc(type, item);
  }

  render() {
    const { type, show } = this.state;
    if (!show) {
      return null;
    }

    const {
      brandList, distanceList, showMap, className,
    } = this.props;

    let view;
    if (type === 'distance') {
      const cells = distanceList.map((item, index) => {
        return (
          <div className={`option-cell ${item.get('selected') ? 'active' : ''}`} key={index} onClick={e => this.doSelect(type, item, e)}>
            {item.get('name')}
          </div>
        );
      });
      view = (
        <Fragment>
          <div className="title">距离选择</div>
          <div className="option-view">{cells}</div>
        </Fragment>
      );
    } else {
      const cells = brandList.map((item, index) => {
        return (
          <div className={`option-cell ${item.get('selected') ? 'active' : ''}`} key={index} onClick={e => this.doSelect(type, item, e)}>
            {item.get('name')}
          </div>
        );
      });
      view = (
        <Fragment>
          <div className="title">品牌选择</div>
          <div className="option-view">{cells}</div>
        </Fragment>
      );
    }
    return (
      <Modal className={`station-filter-modal ${className} ${showMap ? 'hideBanner' : ''}`} touchFunc={this.close}>
        <div className="content">
          {view}
        </div>
      </Modal>
    );
  }
}

export default FilterModal;

